<template>
  <div class="tran-container">
    <list class="list" v-for="(city, index) in cityList" :key="index" v-bind="city"></list>
  </div>
</template>
<script>
/* eslint-disable */
import List from "./List";
import axios from "axios";
export default {
  name: "Train",
  data() {
    return {
      cityList: []
    };
  },
  components: { List },
  methods: {
    getCityList() {
      axios.get("/api/city-end.json").then(this.handlerCity);
    },
    handlerCity(res) {
      res = res.data;
      if (res.success && res.endCity) {
        const citys = res.endCity;
        this.cityList = citys;
      }
    }
  },
  mounted() {
    this.getCityList();
  }
};
</script>
<style lang="scss" scoped>
.tran-container {
  margin: 0 auto;
  width: 70em;
  .list {
    float: left;
  }
}
</style>
